<template>
    <!-- 导航弹框 -->
    <div
        :class="
            'patrol-navigation-wrap dialog-wrap ' +
                ($Ctl.isCs(true) ? 'gradation-bg' : 'bg')
        "
    >
        <div class="dialog-title">导航</div>
        <div class="card-top">
            <el-form style="padding-top: 5px;" :inline="true" :model="form">
                <el-input
                    size="small"
                    id="nav_start_navi"
                    class="search-input"
                    placeholder="选择开始位置"
                    clearable
                    prefix-icon="el-icon-location-outline"
                    v-model="form.input1"
                >
                </el-input>
                <el-input
                    size="small"
                    id="nav_end_navi"
                    class="search-input"
                    placeholder="选择结束位置"
                    clearable
                    prefix-icon="el-icon-location-outline"
                    v-model="form.input2"
                >
                </el-input>
                <el-button
                    size="small"
                    type="primary"
                    style="float: right;margin-top: 10px;"
                    @click="beginDrive_popup(0)"
                    >开始导航</el-button
                >
            </el-form>
        </div>
        <div class="card-bottom"><div id="baiduMap_navi"></div></div>
    </div>
</template>
<script>
import loadBMap from "@/libs/bdMap/loadBMap.js";
let map_navi = null;
export default {
    props: {
        parames: {
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            location: {},
            centerLocation: JSON.parse(
                localStorage.getItem("ilinkBs_mapLocation") || "0"
            ),
            driving: null, //导航对象
            DriveStart_lon: null, //导航开始经纬度
            DriveStart_lat: null, //导航开始经纬度
            DriveEnd_lon: null, //导航结束经纬度
            DriveEnd_lat: null, //导航结束经纬度
            form: {
                input1: "选择开始位置",
                input2: this.parames.name
            },
            naviType: [
                "BMAP_DRIVING_POLICY_AVOID_CONGESTION",
                "BMAP_DRIVING_POLICY_FIRST_HIGHWAYS",
                "BMAP_DRIVING_POLICY_AVOID_HIGHWAYS"
            ]
        };
    },
    created() {
        let that = this;
        that.$nextTick(() => {
            that.initBaiduMap_popup();
        });
    },
    methods: {
        initBaiduMap_popup() {
            let that = this;
            loadBMap()
                .then(() => {
                    map_navi = new BMap.Map("baiduMap_navi", {
                        /*minZoom : 6,
                        maxZoom : 18,*/
                        enableMapClick: false //关闭底图可点功能
                    });
                    let point = new BMap.Point(
                        that.centerLocation.lon,
                        that.centerLocation.lat
                    );
                    map_navi.centerAndZoom(point, that.centerLocation.zoom);
                    map_navi.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
                    map_navi.setMapStyleV2({
                        styleId: that.GLOBAL.mapStyleArr[1].style
                    });
                    let mapType = localStorage.getItem(
                        "ilinkBs_currentMapType"
                    );
                    that.location =  that.parames.orgMap2d
                    if(that.parames.location){
                        if (mapType == 3) {
                            that.location = JSON.parse(
                                that.parames.location.replace(/'/gm, '"')
                            );
                        } else {
                            that.location = JSON.parse(that.parames.location);
                            if (mapType == 2) {
                                that.location = window.FunList.transLocation_FMap(
                                    that.parames.location
                                );
                            }
                        }
                    }
                    if(that.location){
                        that.DriveEnd_lon = that.location.lon;
                        that.DriveEnd_lat = that.location.lat;
                    } else {
                        that.$Ctl.message("暂无该位置信息", "error");
                    }
                    that.int_LocalSearch_popup("nav_start_navi", "我的位置");
                    that.int_LocalSearch_popup(
                        "nav_end_navi",
                        that.parames.name
                    );
                })
                .catch(err => {
                    console.error("地图加载失败");
                });
        },
        beginDrive_popup(type) {
            // 最少时间 、最短距离、避开高速：0，1，2
            let that = this;
            if (
                !that.form.input1 ||
                !that.form.input2 ||
                !(
                    that.DriveStart_lon &&
                    that.DriveStart_lat &&
                    that.DriveEnd_lon &&
                    that.DriveEnd_lat
                )
            ) {
                that.$Ctl.message("请输入地点！", "error");
                return;
            }
            that.clearBeginDrive();
            that.driving = new BMap.DrivingRoute(map_navi, {
                policy: that.naviType[type],
                renderOptions: {
                    map: map_navi,
                    autoViewport: true
                }
            });
            let start = new BMap.Point(
                that.DriveStart_lon,
                that.DriveStart_lat
            );
            let end = new BMap.Point(that.DriveEnd_lon, that.DriveEnd_lat);
            that.driving.search(start, end);
        },
        clearBeginDrive() {
            let that = this;
            if (that.driving) {
                that.driving.clearResults();
                that.driving = null;
            }
        },
        //初始化带搜索的输入框
        int_LocalSearch_popup(inputId, initialVal) {
            let that = this;
            that.DriveStart_lon = that.centerLocation.lon || 116.319769;
            that.DriveStart_lat = that.centerLocation.lat || 39.976546;
            let acSearch = new BMap.Autocomplete({
                input: inputId,
                location: map_navi
            });
            acSearch.setInputValue(initialVal ? initialVal : "");
            acSearch.addEventListener("onconfirm", function(e) {
                //鼠标点击下拉列表后的事件
                let _value = e.item.value;
                let myValue =
                    _value.province +
                    _value.city +
                    _value.district +
                    _value.street +
                    _value.business;
                let local = new BMap.LocalSearch(map_navi, {
                    //智能搜索
                    onSearchComplete: function(results) {
                        if (local.getResults().getPoi(0)) {
                            let re = local.getResults().getPoi(0).point; //获取智能搜索的结果
                            let title = local.getResults().getPoi(0).title;
                            if (inputId.indexOf("start") > -1) {
                                //判断是开始位置按钮
                                that.DriveStart_lon = re.lng;
                                that.DriveStart_lat = re.lat;
                                that.form.input1 = title;
                            } else {
                                //判断是结束位置按钮
                                that.DriveEnd_lon = re.lng;
                                that.DriveEnd_lat = re.lat;
                                that.form.input2 = title;
                            }
                        } else {
                            that.$Ctl.message("暂无该位置信息", "error");
                        }
                    }
                });
                local.search(myValue);
            });
        }
    }
};
</script>

<style lang="scss">
#baiduMap_navi {
    width: 100%;
    height: 100%;
    background-color: rgba(6, 23, 35, 1);
}
.patrol-navigation-wrap {
    .card-top {
        height: 50px;
        width: 100%;
        .search-input {
            width: calc(50% - 50px);
            outline: none;
            padding-left: 10px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 4px;
            margin: 10px 0 5px;
            font-size: 16px;
            .el-input__prefix {
                color: #89f8ff;
            }
            .el-input__inner {
                background-color: rgba(255, 255, 255, 0);
                color: #fff;
                border: none;
            }
            input::-webkit-input-placeholder {
                color: #505961;
            }
            input::-moz-placeholder {
                /* Mozilla Firefox 19+ */
                color: #505961;
            }
            input:-moz-placeholder {
                /* Mozilla Firefox 4 to 18 */
                color: #505961;
            }
            input:-ms-input-placeholder {
                /* Internet Explorer 10-11 */
                color: #505961;
            }
        }
    }
    .card-bottom {
        height: calc(100% - 55px);
        width: 100%;
    }
}
</style>
